<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('班组生产数据列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>设备编号：</label>
                            <input type="text" name="deviceNo" id="deviceNo"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick=""><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12" style="margin-top: 15px; background-color: #ffffff; border-radius: 6px; box-shadow: 1px 1px 3px #00000033">
            <div class="wrapper wrapper-content animated fadeInRight" style="padding: 0">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>实时监控：</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="chart-1-1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>实时监控：</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="chart-1-2"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>实时监控：</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="myChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">

    $(function() {

        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            };
        }

        let data = [];
        let now = new Date(2022, 9, 3);
        let oneDay = 24 * 3600 * 1000;
        let value = Math.random() * 1000;
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }

        var chart_1_1 = echarts.init(document.getElementById('chart-1-1'));
        var option = {
            title: {
                text: '电流 & 时间'
            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     params = params[0];
                //     var date = new Date(params.name);
                //     return (
                //         date.getDate() +
                //         '/' +
                //         (date.getMonth() + 1) +
                //         '/' +
                //         date.getFullYear() +
                //         ' : ' +
                //         params.value[1]
                //     );
                // },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    showSymbol: false,
                    data: data
                }
            ]
        };


        setInterval(function () {
            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }
            chart_1_1.setOption({
                series: [
                    {
                        data: data
                    }
                ]
            });
        }, 1000);

        chart_1_1.setOption(option);
        $(window).resize(chart_1_1.resize);


        function randomData1() {
            now1 = new Date(+now1 + oneDay1);
            value1 = value1 + Math.random() * 10 - 5;
            return {
                name: now1.toString(),
                value: [
                    [now1.getFullYear(), now1.getMonth() + 1, now1.getDate()].join('/'),
                    Math.round(value1)
                ]
            };
        }

        let data1 = [];
        let now1 = new Date(2022, 9, 3);
        let oneDay1 = 24 * 3600 * 1000;
        let value1 = Math.random() * 1000;
        for (var i = 0; i < 1000; i++) {
            data1.push(randomData1());
        }
        var chart_1_2 = echarts.init(document.getElementById('chart-1-2'));
        var option = {
            title: {
                text: '电压 & 时间'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return (
                        date.getDate() +
                        '/' +
                        (date.getMonth() + 1) +
                        '/' +
                        date.getFullYear() +
                        ' : ' +
                        params.value[1]
                    );
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    showSymbol: false,
                    data: data1
                }
            ]
        };


        setInterval(function () {
            for (var i = 0; i < 5; i++) {
                data1.shift();
                data1.push(randomData());
            }
            chart_1_2.setOption({
                series: [
                    {
                        data: data1
                    }
                ]
            });
        }, 1000);

        chart_1_2.setOption(option);
        $(window).resize(chart_1_2.resize);


        let myChart = echarts.init(document.getElementById('myChart'))
        var option = {
            yAxis: [
                {
                    name: '指标参数一(单位)',
                    type: 'value',
                    // max: 700,
                    // min: 0,
                    // 让表格的刻度向靠里侧显示
                    axisTick: {
                        inside: true
                    },
                    axisLabel: {
                        inside: true
                    },
                    // 设置刻度线的颜色等样式
                    axisLine: {
                        lineStyle: {
                            color: 'red',
                            width: 3
                        }
                    },
                    splitLine: {
                        show: true, //想要不显示网格线，改为false
                        lineStyle: {
                            // 设置网格为虚线
                            type: 'dashed'
                        }
                    }
                },
                {
                    name: '指标参数二(单位)',
                    // max: 800,
                    // min: 0,
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'orange',
                            width: 3
                        }
                    },
                    splitLine: {
                        show: false //想要不显示网格线，改为false
                    },
                    // 设置坐标轴偏移位置
                    offset: -1060
                },
                {
                    name: '指标参数三(单位)',
                    // max: 900,
                    // min: 0,
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'green',
                            width: 3
                        }
                    },
                    offset: -1160,
                    splitLine: {
                        show: false //想要不显示网格线，改为false
                    }
                },
                {
                    name: '指标参数四(单位)',
                    // max: 1000,
                    // min: 0,
                    type: 'value',
                    axisTick: {
                        inside: true
                    },
                    axisLabel: {
                        inside: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'blue',
                            width: 3
                        }
                    },
                    splitLine: {
                        show: false //想要不显示网格线，改为false
                    }
                },
                {
                    name: '指标参数五(单位)',
                    // max: 1100,
                    // min: 0,
                    type: 'value',
                    offset: 100,
                    axisTick: {
                        inside: true
                    },
                    axisLabel: {
                        inside: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'purple',
                            width: 3
                        }
                    },
                    splitLine: {
                        show: false //想要不显示网格线，改为false
                    }
                },
                {
                    name: '指标参数六(单位)',
                    // max: 700,
                    // min: 0,
                    type: 'value',
                    offset: 200,
                    axisTick: {
                        inside: true
                    },
                    axisLabel: {
                        inside: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'pink',
                            width: 3
                        }
                    },
                    splitLine: {
                        show: false //想要不显示网格线，改为false
                    }
                }
            ],
            // 调整表格两边空白的区域
            grid: {
                // 左侧
                x: '20%',
                // 上部
                // y: 25,
                // 右侧
                x2: '20%'
                // 下部
                // y2: 35
            },
            xAxis: {
                name: '时间',
                type: 'time',
                // boundaryGap: false, //x下标在刻度处显示
                splitLine: {
                    show: true, //想要不显示网格线，改为false
                    lineStyle: {
                        // 设置网格为虚线
                        type: 'dashed'
                    }
                },
                // splitArea: { show: true }, //保留网格区域
                // 设置刻度线的颜色等样式
                axisLine: {
                    lineStyle: {
                        color: 'black',
                        width: 3
                    }
                }
            },
            series: [
                {
                    // 曲线数据配置
                    data: [
                        {
                            // value[0] 为时间  value[1] 为值
                            value: ['1997-10-1', 300]
                        },
                        {
                            value: ['1997-10-2', 200]
                        },
                        {
                            value: ['1997-10-3', 500]
                        },
                        {
                            value: ['1997-10-4', 600]
                        },
                        {
                            value: ['1997-10-5', 400]
                        },
                        {
                            value: ['1997-10-6', 200]
                        }
                    ],
                    // 曲线名
                    name: '参数1',
                    // 设置参数对应的y坐标轴的索引
                    type: 'line',
                    // 曲线平滑设置
                    smooth: true
                },
                {
                    data: [
                        {
                            value: ['1997-10-1', 180]
                        },
                        {
                            value: ['1997-10-2', 250]
                        },
                        {
                            value: ['1997-10-3', 50]
                        },
                        {
                            value: ['1997-10-4', 450]
                        },
                        {
                            value: ['1997-10-5', 400]
                        },
                        {
                            value: ['1997-10-6', 200]
                        }
                    ],
                    // 曲线名
                    name: '参数2',
                    // 设置所在曲线对应的y坐标轴的索引
                    yAxisIndex: 1,
                    type: 'line',
                    // 曲线平滑设置
                    smooth: true
                },
                {
                    data: [
                        {
                            value: ['1997-10-1', 100]
                        },
                        {
                            value: ['1997-10-2', 800]
                        },
                        {
                            value: ['1997-10-3', 250]
                        },
                        {
                            value: ['1997-10-4', 350]
                        },
                        {
                            value: ['1997-10-5', 360]
                        },
                        {
                            value: ['1997-10-6', 500]
                        }
                    ],
                    name: '参数3',
                    // 设置参数对应的y坐标轴的索引
                    yAxisIndex: 2,
                    type: 'line',
                    // 曲线平滑设置
                    smooth: true
                },
                {
                    data: [
                        {
                            value: ['1997-10-1', 200]
                        },
                        {
                            value: ['1997-10-2', 400]
                        },
                        {
                            value: ['1997-10-3', 600]
                        },
                        {
                            value: ['1997-10-4', 800]
                        },
                        {
                            value: ['1997-10-5', 1000]
                        },
                        {
                            value: ['1997-10-6', 1100]
                        }
                    ],
                    name: '参数4',
                    // 设置参数对应的y坐标轴的索引
                    yAxisIndex: 3,
                    type: 'line',
                    // 曲线平滑设置
                    smooth: true
                },
                {
                    data: [
                        {
                            value: ['1997-10-1', 1100]
                        },
                        {
                            value: ['1997-10-2', 800]
                        },
                        {
                            value: ['1997-10-3', 600]
                        },
                        {
                            value: ['1997-10-4', 500]
                        },
                        {
                            value: ['1997-10-5', 400]
                        },
                        {
                            value: ['1997-10-6', 200]
                        }
                    ],
                    name: '参数5',
                    // 设置参数对应的y坐标轴的索引
                    yAxisIndex: 4,
                    type: 'line',
                    // 曲线平滑设置
                    smooth: true
                },
                {
                    data: [
                        {
                            value: ['1997-10-1', 700]
                        },
                        {
                            value: ['1997-10-2', 600]
                        },
                        {
                            value: ['1997-10-3', 500]
                        },
                        {
                            value: ['1997-10-4', 400]
                        },
                        {
                            value: ['1997-10-5', 300]
                        },
                        {
                            value: ['1997-10-6', 200]
                        }
                    ],
                    name: '参数6',
                    // 设置参数对应的y坐标轴的索引
                    yAxisIndex: 5,
                    type: 'line',
                    // 曲线平滑设置
                    smooth: true
                }
            ],
            tooltip: {
                trigger: 'axis', // 有3个属性值 axis   item   none
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985' //配置展示方块的背景颜色
                    }
                }
            },
            legend: {     // 调整图样文字
                data: ['参数1', '参数2', '参数3', '参数4', '参数5', '参数6']
            },
            // 定义图例和曲线颜色
            color: ['red', 'orange', 'green', 'blue', 'purple', 'pink']
        };
        myChart.setOption(option);
        $(window).resize(myChart.resize);



    });



</script>
</body>
</html>